<template>  
  <div id="app">  
    <Gitee></Gitee>  
  
    <div><todo-list></todo-list></div>
  
    <div><odd-sum-calculator :oddSum="oddSum" @update:oddSum="oddSum = $event"></odd-sum-calculator></div>  
  </div>  
</template>  
  
<script>  
import Gitee from './components/Gitee.vue';  
import TodoList from './components/TodoList.vue';  
import OddSumCalculator from './components/OddSumCalculator.vue';  
  
export default {  
  components: {  
    TodoList,  
    OddSumCalculator,  
    Gitee  
  },  
  data() {  
    return {  
      todos: [],  
      oddSum: 0  
    }  
  },  
  created() {  
    console.log('App component has been created.');  
  },  
  mounted() {  
    console.log('App component has been mounted.');   
  } ,
  beforeDestroy() {
  }, 
}  
</script>
<style scoped>
.completed {
  width: 1000px;
  text-decoration: line-through;
}

div {
  position: relative;
  margin-top: 10px;
  background-color: #fed0f0a9;
  font-family: Arial, sans-serif;
  max-width: 100%;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #e785f627;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(190, 158, 158, 0.1);
}

h2 {
  font-size: 40px;
  font-weight: 1000;
  text-align: center;
  color: #333;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

li input[type="checkbox"] {
  margin-right: 10px;
}

li span {
  flex: 1;
}

li button {
  background-color: #d48fba;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

li button:hover {
  background-color: #c0392b;
}

li.done {
  background-color: #ddd;
  opacity: 0.7;
}

li.done span {
  color: #666;
}

@media (max-width: 600px) {
  div {
    max-width: 100%;
  }
}
</style>